import React, { FC, useState } from 'react';
import { Button, Table, Space, Popconfirm } from 'antd';
import { connect } from 'react-redux';
import UserModal from './components/UserModal';
import { SingelUserType, IndexModelState } from './data.d';
import { Dispatch, Loading } from 'umi';

interface UserPageProps {
  users: IndexModelState;
  dispatch: Dispatch;
  userListLoading: boolean;
}

//view中数据逻辑都在model处理，初始化时载入数据。
const index: FC<UserPageProps> = ({ dispatch, users, userListLoading }) => {
  // 子组件传递 值 或 方法 都是通过 props实现的, 通过react hook 更新state 或effect
  // react hook   [变量， 改变变量的方法] = useState(默认值)
  // hook 实现跨逻辑区域访问方法
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [userInfo, setUserInfo] = useState<SingelUserType | undefined>(
    undefined,
  );

  const editModal = (record: SingelUserType) => {
    setIsModalVisible(true);
    setUserInfo(record);
  };

  //modal form submit save
  const formSubmit = (value: any) => {
    if (userInfo === undefined) {
      dispatch({
        //不能直接写action需加namespace
        type: 'users/addUser',
        payload: value,
      });
    } else {
      let id = userInfo.id;
      //调用model effect
      dispatch({
        //不能直接写action需加namespace
        type: 'users/saveUser',
        payload: { id, value },
      });
    }

    setIsModalVisible(false);
  };

  const addUser = () => {
    setIsModalVisible(true);
    setUserInfo(undefined);
  };

  const deleteUser = (record: SingelUserType) => {
    let id = record.id;
    //调用model effect
    dispatch({
      //不能直接写action需加namespace
      type: 'users/deleteUser',
      payload: { id },
    });
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  const ifDelete = (record: SingelUserType) => {
    deleteUser(record);
  };

  const columns = [
    {
      title: '名字',
      dataIndex: 'name',
      key: 'name',
      render: (text: string) => <a>{text}</a>,
    },
    {
      title: '邮件',
      dataIndex: 'email',
      key: 'email',
    },
    {
      title: '创建时间',
      dataIndex: 'create_time',
      key: 'create_time',
    },
    {
      title: 'Action',
      key: 'action',
      render: (text: string, record: SingelUserType) => (
        <Space size="middle">
          <a onClick={() => editModal(record)}>编辑</a>
          <Popconfirm
            title="你确定要删除该用户信息吗?"
            onConfirm={() => {
              ifDelete(record);
            }}
            okText="删除"
            cancelText="取消"
          >
            <a>删除</a>
          </Popconfirm>
        </Space>
      ),
    },
  ];

  return (
    <div className="list-table">
      <Button
        type="primary"
        onClick={() => {
          addUser();
        }}
      >
        添加
      </Button>
      {/* 此处state数据必须通过.data或其它属性访问， 原数据多属性时更加灵活 */}
      <Table
        columns={columns}
        dataSource={users.data}
        rowKey="id"
        loading={userListLoading}
      />
      <UserModal
        isModalVisible={isModalVisible}
        handleCancel={handleCancel}
        userInfo={userInfo}
        formSubmit={formSubmit}
      ></UserModal>
    </div>
  );
};

//做为connect 的第一个参数，默认去取对应的model 的state数据，参数通过model中subscriptions监听实现
const mapStateToProps = ({
  users,
  loading,
}: {
  users: IndexModelState;
  loading: Loading;
}) => {
  // console.log(users);
  return {
    users,
    userListLoading: loading.models.users,
  };
};

export default connect(mapStateToProps)(index);
